<template>
  <!--模板-->
  <h1>emit：</h1>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">基础封装无防抖</el-col>
    <el-col :span="8">
      <input-emit v-model="emitVal"/>
    </el-col>
    <el-col :span="8">{{emitVal}}</el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4">script setup</el-col>
    <el-col :span="8">
      <input-emit2 v-model="emitVal"/>
    </el-col>
    <el-col :span="8">{{emitVal}}</el-col>
  </el-row>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">原生防抖：</el-col>
    <el-col :span="8">
      <input-customer-ref />
    </el-col>
    <el-col :span="12"></el-col>
  </el-row>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">改进防抖：</el-col>
    <el-col :span="8">
      <input-deb-emit v-model="emitVal" />
    </el-col>
    <el-col :span="12">{{emitVal}}</el-col>
  </el-row>
  <hr>
  <h1>model：</h1>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">基础封装，model：</el-col>
    <el-col :span="8">
      <input-model :model="person" colName="name"/>
    </el-col>
    <el-col :span="8">{{person}}</el-col>
  </el-row>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">对象防抖：</el-col>
    <el-col :span="8">
      <input-deb-model :model="person" colName="name" />
    </el-col>
    <el-col :span="12">{{person}}</el-col>
  </el-row>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">范围，range：</el-col>
    <el-col :span="8">
      <input-range :model="date" colName="d1_d2"/>
    </el-col>
    <el-col :span="12">{{date}}</el-col>
  </el-row>
  <hr>
  <el-row :gutter="20">
    <el-col :span="4">多级，cascaderRef：</el-col>
    <el-col :span="8">
      <input-cascader :model="cascader" colName="d1_d2_d3"/>
    </el-col>
    <el-col :span="12">{{cascader}}</el-col>
  </el-row>
  <hr>
 
</template>

<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue'

  import inputEmit from './10-emit.vue'
  import inputEmit2 from './12-emit-ss.vue'
  import inputModel from './20-model.vue'
  import inputRange from './25-range.vue'
  import inputCascader from './28-cascader.vue'
  // 防抖
  import inputCustomerRef from './31-deb-cus-ref.vue'
  import inputDebEmit from './30-deb-emit.vue'
  import inputDebModel from './35-deb-model.vue'

  export default defineComponent({
    name: 'nf-base-text',
    components: {
      inputEmit,
      inputEmit2,
      inputModel,
      inputRange,
      inputCascader,
      // 防抖
      inputCustomerRef,
      inputDebEmit,
      inputDebModel
    },
    props: {
    },
    setup(props, context) {

      // v-model 、 emit 的封装
      const emitVal = ref('')

      // 传递 对象
      const person = reactive({name: '测试', age: 111})
      // 范围，分为两个属性
      const date = reactive({d1: '2012-10-11', d2: '2012-11-11'})
      // 分为多个属性
      const cascader = reactive({d1: "guide", d2: "navigation", d3: "side nav" })
     
      return {
        emitVal,
        person,
        date,
        cascader
      }
    }
  })
</script>